<template>
  <div id="app" v-bind:style="appDivStyle">
      <div class="context" ref="context">
          <!-- 条件查询区 -->
        <div class="queryBox" ref="queryBox">
                <el-form :inline="true" :model="formQueryCondition"
                         ref="form" size="mini">
                    <el-form-item :label="$t('ProgramList.queryLabel.programCode')"   :label-width="queryformLabelWidth">
                        <el-input v-model.trim="formQueryCondition.programCode.val" class="queryItemStyle" clearable
                                  :placeholder="$t('ProgramList.queryLabel.placeholderProgramCode')">
                        </el-input>
                    </el-form-item>
                    <el-form-item :label="$t('ProgramList.queryLabel.programName')"   :label-width="queryformLabelWidth">
                        <el-input v-model.trim="formQueryCondition.programName.val" class="queryItemStyle" clearable
                                  :placeholder="$t('ProgramList.queryLabel.placeholderProgramName')">
                        </el-input>
                    </el-form-item>
                    <!-- <el-form-item :label="$t('ProgramList.queryLabel.site')"   :label-width="queryformLabelWidth">
                        <el-input v-model.trim="formQueryCondition.site.val" class="queryItemStyle" clearable
                                  :placeholder="$t('ProgramList.queryLabel.placeholderSite')">
                        </el-input>
                    </el-form-item> -->
                     <el-form-item :label="$t('ProgramList.queryLabel.site')" :label-width="queryformLabelWidth">
                        <el-select v-model="formQueryCondition.parentSite.val" placeholder="请选择">
                            <el-option :label="$t('playManage.label.all')" value=""></el-option>
                            <el-option :label="$t('playManage.label.site1')" value="Site1"></el-option>
                            <el-option :label="$t('playManage.label.site2')" value="Site2"></el-option>
                            <el-option :label="$t('playManage.label.site3')" value="Site3"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="$t('ProgramList.queryLabel.channel')"   :label-width="queryformLabelWidth">
                        <el-select v-model="formQueryCondition.channel.val" placeholder="请选择">
                          <el-option :label="$t('playManage.label.all')" value=""></el-option>
                          <el-option :label="$t('playManage.label.youngChannel')" value="YoungChannel"></el-option>
                          <el-option :label="$t('playManage.label.financialChannel')" value="FinancialChannel"></el-option>
                          <el-option :label="$t('playManage.label.CCTVChannel')" value="CCTVChannel"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="$t('ProgramList.queryLabel.startTime')"   :label-width="queryformLabelWidth">
                        <el-date-picker v-model.trim="formQueryCondition.startTime.val" class="queryItemStyle" clearable
                                :placeholder="$t('queryLabel.selectOp')" type="datetime" >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item :label="$t('ProgramList.queryLabel.timeTo')"   :label-width="queryformLabelWidth">
                        <el-date-picker v-model.trim="formQueryCondition.endTime.val" class="queryItemStyle" clearable
                                :placeholder="$t('queryLabel.selectOp')" type="datetime" >
                        </el-date-picker>
                    </el-form-item>
                    <!-- 下发时间 -->
                    <el-form-item :label="$t('ProgramList.queryLabel.copyrightExpirationTime')" :label-width="queryformLabelWidth" >
                        <el-date-picker v-model.trim="formQueryCondition.copyrightExpirationTime.val" class="queryItemStyle" clearable
                                :placeholder="$t('ProgramList.queryLabel.placeholderCopyrightExpirationTime')" type="date" >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item :label="$t('queryLabel.timeTo')" :label-width="queryformLabelWidth" >
                        <el-date-picker v-model.trim="formQueryCondition.copyrightExpirationTimeEND.val" class="queryItemStyle" clearable
                                :placeholder="$t('ProgramList.queryLabel.placeholderCopyrightExpirationTime')" type="date" >
                        </el-date-picker>
                    </el-form-item>
                    <!-- <el-form-item label="节目名称"   :label-width="queryformLabelWidth">
                        <el-input v-model.trim="formQueryCondition.programName.val" class="queryItemStyle" clearable
                                  :placeholder="$t('queryLabel.assetsAudit.placeholderAssetsName')">
                        </el-input>
                    </el-form-item> -->
                    <!-- <el-form-item :label="$t('assetsAudit.auditTime')" :label-width="queryformLabelWidth">
                        <el-date-picker v-model.trim="formQueryCondition.updateTimeS.val" class="queryItemStyle" clearable
                                :placeholder="$t('queryLabel.selectOp')" type="date" >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item :label="$t('queryLabel.timeTo')" :label-width="queryformLabelWidth">
                         <el-date-picker v-model.trim="formQueryCondition.updateTimeE.val" class="queryItemStyle" clearable
                                :placeholder="$t('queryLabel.selectOp')" type="date" >
                        </el-date-picker>
                    </el-form-item>


                    <el-form-item :label="$t('queryLabel.subAssets.source')" :label-width="queryformLabelWidth">
                        <el-select v-model.trim="formQueryCondition.source.val" class="queryItemStyle" :placeholder="$t('queryLabel.selectOp')">
                            <el-option :label="$t('shellAssets.label.all')" value=""></el-option>
                            <el-option :label="$t('shellAssets.label.shellAssetsSource1')" value="shellAssetsSource1"></el-option>
                            <el-option :label="$t('shellAssets.label.shellAssetsSource2')" value="shellAssetsSource2"></el-option>
                            <el-option :label="$t('shellAssets.label.shellAssetsSource3')" value="shellAssetsSource3"></el-option>
                            <el-option :label="$t('shellAssets.label.shellAssetsSource4')" value="shellAssetsSource4"></el-option>
                            <el-option :label="$t('shellAssets.label.shellAssetsSource5')" value="shellAssetsSource5"></el-option>
                            <el-option :label="$t('shellAssets.label.shellAssetsSource6')" value="shellAssetsSource6"></el-option>
                            <el-option :label="$t('shellAssets.label.shellAssetsSource7')" value="shellAssetsSource7"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="$t('queryLabel.subAssets.status')" :label-width="queryformLabelWidth">
                        <el-select v-model.trim="formQueryCondition.status.val" class="queryItemStyle" :placeholder="$t('queryLabel.selectOp')">
                            <el-option :label="$t('shellAssets.label.all')" value=""></el-option>
                            <el-option :label="$t('shellAssets.label.shellAssetsStatus1')" value="shellAssetsStatus1"></el-option>
                            <el-option :label="$t('shellAssets.label.shellAssetsStatus2')" value="shellAssetsStatus2"></el-option>
                            <el-option :label="$t('shellAssets.label.shellAssetsStatus3')" value="shellAssetsStatus3"></el-option>
                            <el-option :label="$t('shellAssets.label.shellAssetsStatus4')" value="shellAssetsStatus4"></el-option>
                        </el-select>
                    </el-form-item> -->




                    <div style="text-align:right">
                        <!-- 返回 -->
                        <el-form-item v-if="isNeedGoBack">
                            <el-button type="primary" @click="onBack('form')" icon="el-icon-back">{{$t('ProgramList.btnText.backBtnText')}}</el-button>
                        </el-form-item>
                        <!-- 查询 -->
                        <el-form-item>
                            <el-button type="primary" @click="onQuery" icon="el-icon-search" :loading="loading">{{ $t('btnText.queryBtnText') }}</el-button>
                        </el-form-item>
                    </div>

                </el-form>
            </div>

            <!-- 数据展示区 -->
            <div class="dataBox" ref="dataBox">

                <el-table v-if="isInit" ref="singleTable"
                            :data="tableData"
                            :height="tableHeight"
                            @sort-change="sortChange"
                            v-loading="loading" size="mini"
                            style="width: 100%;" stripe=stripe border=border>
                    <el-table-column type="index"  width="70" fixed="left"
                        :label="$t('table.xh')" align="center">
                    </el-table-column>
                    <!-- <el-table-column type="selection" width="55" fixed="left" align="center">
                    </el-table-column> -->
                    <!-- <el-table-column width="220" fixed="left"
                        :label="$t('table.op')" align="center">
                        <template slot-scope="scope">
                            <el-button size="gv" icon="el-icon-edit"
                                :loading="loading" @click="onEdit(scope.$index, scope.row)"
                                    >{{ $t('ProgramList.btnText.editBtnText') }}</el-button>
                            <el-button size="gv" icon="el-icon-star-on"
                                :loading="loading" @click="doSendBatch"
                                    >{{ $t('ProgramList.btnText.onlineBtnText') }}</el-button>
                            <el-button size="gv" icon="el-icon-star-off" type="danger"
                                :loading="loading" @click="offline(scope.$index, scope.row)"
                                    >{{ $t('ProgramList.btnText.offlineBtnText') }}</el-button>
                           <el-button size="gv" icon="el-icon-delete" type="danger"
                                :loading="loading" @click="logoffRow(scope.$index, scope.row)"
                                            >{{ $t('btnText.logoffBtnText') }}</el-button>
                        </template>
                    </el-table-column> -->
                    <el-table-column prop="programCode" min-width="110" fixed="left"
                        :label="$t('ProgramList.table.programCode')" sortable="custom" sort-by="name">
                    </el-table-column>
                    <el-table-column prop="programName" min-width="180" fixed="left"
                        :label="$t('ProgramList.table.programName')" sortable="custom" sort-by="name">
                    </el-table-column>
                    <el-table-column prop="site" min-width="110"
                        :label="$t('ProgramList.table.site')" sortable="custom" sort-by="name">
                    </el-table-column>
                    <el-table-column prop="channel" min-width="110"
                        :label="$t('ProgramList.table.channel')" sortable="custom" sort-by="name">
                    </el-table-column>
                    <el-table-column prop="startTime" min-width="180"
                        :label="$t('ProgramList.table.startTime')" sortable="custom" sort-by="code">
                    </el-table-column>
                    <el-table-column prop="endTime" min-width="180"
                        :label="$t('ProgramList.table.endTime')" sortable="custom" sort-by="name">
                    </el-table-column>
                    <el-table-column prop="programPeriod" min-width="180"
                        :label="$t('ProgramList.table.programPeriod')" sortable="custom" sort-by="name">
                    </el-table-column>
                    <!-- <el-table-column prop="programPost" min-width="180"
                        :label="$t('ProgramList.table.programPost')" sortable="custom" sort-by="name">
                    </el-table-column> -->
                    <!-- <el-table-column prop="highDefinition" min-width="110"
                        :label="$t('ProgramList.table.highDefinition')" sortable="custom" sort-by="code">
                    </el-table-column> -->
                    <!-- <el-table-column prop="programDesc" min-width="180"
                        :label="$t('ProgramList.table.programDesc')" sortable="custom" sort-by="name">
                    </el-table-column> -->
                    <!-- <el-table-column prop="createTime" min-width="180"
                        :label="$t('ProgramList.table.createTime')" sortable="custom" sort-by="code">
                    </el-table-column>
                    <el-table-column prop="createBy" min-width="140"
                        :label="$t('ProgramList.table.createBy')" sortable="custom" sort-by="name">
                    </el-table-column>   -->
                    <el-table-column prop="lastUpdateTime" min-width="180"
                        :label="$t('ProgramList.table.lastUpdateTime')" sortable="custom" sort-by="code">
                    </el-table-column>
                    <el-table-column prop="lastUpdateBy" min-width="140"
                        :label="$t('ProgramList.table.lastUpdateBy')" sortable="custom" sort-by="code">
                    </el-table-column>
                </el-table>


            </div>
        </div>

        <!-- 翻页选择区 -->
        <div class="pageBox">
            <el-pagination @size-change="sizeChange"
                            @current-change="currentPageChange"
                            :current-page="pager.curPage"
                            :page-sizes="pager.sizes"
                            :page-size="pager.curSize"
                            :background="true"
                            layout="total, sizes, prev, pager, next, jumper" :total="pager.total">
            </el-pagination>
        </div>

         <!--编辑对话框-->
        <el-dialog :title="$t('label.dialogTitle')" :visible.sync="isShowEditForm" top="5vh">
            <el-form :model="editForm" ref="editForm" size="mini"
                     :label-position="editFormPosition" status-icon=status-icon :rules="editRules">

                <!--节目编号-->
                <el-form-item :label="$t('ProgramList.queryLabel.programCode')" :label-width="editformLabelWidth" prop="programCode">
                    <el-input v-model.trim="editForm.programCode" maxlength="20" :disabled="isEnabled"
                              :placeholder="$t('ProgramList.queryLabel.placeholderProgramCode')"></el-input>
                </el-form-item>
                <!-- 节目名称 -->
                <el-form-item :label="$t('ProgramList.queryLabel.programName')" :label-width="editformLabelWidth" prop="programName">
                    <el-input v-model.trim="editForm.programName" maxlength="20"
                              :placeholder="$t('ProgramList.queryLabel.placeholderProgramName')"></el-input>
                </el-form-item>
                <!-- 所属站点 -->
                <!-- <el-form-item :label="$t('ProgramList.queryLabel.site')" :label-width="editformLabelWidth" prop="site">
                    <el-input v-model.trim="editForm.site" maxlength="20"
                              :placeholder="$t('ProgramList.queryLabel.placeholderSite')"></el-input>
                </el-form-item> -->
                <!-- <el-form-item :label="$t('ProgramList.queryLabel.site')" :label-width="editformLabelWidth">
                    <el-select v-model="editForm.parentSite" placeholder="请选择">
                        <el-option :label="$t('playManage.label.site1')" value="Site1"></el-option>
                        <el-option :label="$t('playManage.label.site2')" value="Site2"></el-option>
                        <el-option :label="$t('playManage.label.site3')" value="Site3"></el-option>
                    </el-select>
                </el-form-item> -->
                <!-- 所属频道 -->
                <el-form-item :label="$t('ProgramList.queryLabel.channel')" :label-width="editformLabelWidth" prop="channel">
                   <el-select v-model="editForm.channel">
                        <el-option :label="$t('ProgramList.editLabel.channel1')" value="channel1"></el-option>
                        <el-option :label="$t('ProgramList.editLabel.channel2')" value="channel2"></el-option>
                   </el-select>
                </el-form-item>
                <!--开始时间-->
                <el-form-item :label="$t('ProgramList.queryLabel.startTime')" :label-width="editformLabelWidth" prop="startTime">
                    <el-date-picker v-model="editForm.startTime" type="datetime" :placeholder="$t('ProgramList.editLabel.placeholderStartTime')"></el-date-picker>
                </el-form-item>
                <!--结束时间-->
                <el-form-item :label="$t('ProgramList.queryLabel.endTime')" :label-width="editformLabelWidth" prop="endTime">
                    <el-date-picker v-model="editForm.endTime" type="datetime" :placeholder="$t('ProgramList.editLabel.placeholderEndTime')"></el-date-picker>
                </el-form-item>
                <!-- 计算时长 -->
                <el-form-item :label="$t('ProgramList.editLabel.billDuration')" :label-width="editformLabelWidth" prop="billDuration">
                    <el-input v-model.trim="editForm.billDuration" maxlength="20" :disabled="true"></el-input>
                </el-form-item>
                <!--节目集数-->
                <!-- <el-form-item :label="$t('ProgramList.editLabel.programCount')" :label-width="editformLabelWidth" >
                    <el-input v-model.trim="editForm.programCount" maxlength="20"
                              :placeholder="$t('ProgramList.editLabel.placeholderProgramCount')"></el-input>
                </el-form-item> -->
                <!-- 状态 -->
                <!-- <el-form-item :label="$t('ProgramList.editLabel.status')" :label-width="editformLabelWidth">
                    <el-select v-model="editForm.status">
                        <el-option :label="$t('ProgramList.editLabel.playStatus1')" value="playStatus1"></el-option>
                        <el-option :label="$t('ProgramList.editLabel.playStatus2')" value="playStatus2"></el-option>
                    </el-select>
                </el-form-item> -->
                <!-- 节目介绍 -->
                <el-form-item :label="$t('ProgramList.editLabel.programDesc')" :label-width="editformLabelWidth" prop="programDesc">
                    <el-input v-model.trim="editForm.programDesc" maxlength="300"  type="textarea"
                              :placeholder="$t('ProgramList.editLabel.placeholderProgramDesc')"></el-input>
                </el-form-item>
                <!-- 节目海报 -->
                <el-form-item :label="$t('ProgramList.editLabel.programPoster')" :label-width="editformLabelWidth" prop="programPoster">
                    <el-input v-model.trim="editForm.programPoster" maxlength="300"  type="file" name="fileUpload"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer">
                <!--取消按钮-->
                <el-button size="mini" @click="isShowEditForm = false" :loading="loading">{{ $t('btnText.cancelBtnText') }}</el-button>
                <!--保存按钮-->
                <el-button size="mini" type="primary" @click="submitForm('editForm')" :loading="loading">{{ $t('btnText.saveBtnText') }}</el-button>
            </div>
        </el-dialog>


       <!-- 下发对话框 -->
       <el-dialog :title="$t('ProgramList.label.releaseDialogTitle')" :visible.sync="isSendEditForm" top="5vh">
            <el-form :inline="true" :model="editForm" ref="editForm" size="mini"
                     :label-position="editFormPosition" status-icon=status-icon :rules="editRules">

            <el-row>
              <el-form-item :label="$t('')" :label-width="editformLabelWidth">

                    <el-checkbox :label="$t('AssetIssuance.editLabel.move')" name="Move"></el-checkbox>
                    <el-checkbox :label="$t('AssetIssuance.editLabel.telecomN')" name="TelecomN"></el-checkbox>
                    <el-checkbox :label="$t('AssetIssuance.editLabel.telecomS')" name="TelecomS"></el-checkbox>
                    <el-checkbox :label="$t('AssetIssuance.editLabel.unicom')" name="Unicom"></el-checkbox>

                </el-form-item>
            </el-row>

            </el-form>
            <div slot="footer">
                <el-button size="mini" @click="isSendEditForm = false" :loading="loading">{{ $t('btnText.cancelBtnText') }}</el-button>
                <!-- <el-button size="mini" type="primary" @click="submitForm2('editForm')" :loading="loading">{{ $t('btnText.saveBtnText') }}</el-button> -->
                <el-button size="mini" type="primary" @click="success" :loading="loading">{{ $t('btnText.saveBtnText') }}</el-button>
            </div>

        </el-dialog>
  </div>


</template>

<script>

import comBaseVue from '../../baseViewModel';

export default {
  mixins: [comBaseVue],
  name:'ProgramList',
  props: {
    isNeedGoBack:Boolean,
    // curRootAssets: Object,
    curProps: null
  },
  data () {

    return {
        isEnabled: false,
        isShowInfoForm: false,
        isSendEditForm:false,
        activeName: 'first',
        isInit:false,
        tableHeight:100,
        appDivStyle:{
            height:this.$store.getters.appHeight,
        },
        modelName:"live.model.ProgramList",
        // 查询条件
        formQueryCondition: {
            programCode: {
                op: 'LIKE',
                val: ''
            },
            programName: {
                op: 'LIKE',
                val: ''
            },
            parentSite: {
                val: ''
            },
            channel: {
                val: ''
            },
            startTime: {
                val: ''
            },
            endTime: {
                val: ''
            },
            copyrightExpirationTime: {
                val: ''
            },
            copyrightExpirationTimeEND: {
                val: ''
            },
        },

         // 编辑面板(审核)绑定的对象
        editForm: {
            keyID: 0,
            version: 0,
            programCode: "",
            programName: "",
            // programCount: "",
            channel: "",
            site: "",
            startTime: "",
            endTime: "",
            billDuration: "",
            poster: "",
            programDesc: "",
            // status: "",
        },
        // 编辑面板(审核)的验证规则
        editRules: {
            programCode: [{ required: true, message: this.$i18n.t('ProgramList.rules.placeholderProgramCode'), trigger: 'blur' }],
            programName: [{ required: true, message: this.$i18n.t('ProgramList.rules.placeholderProgramName'), trigger: 'blur' }],
            channel: [{ required: true, message: this.$i18n.t('ProgramList.rules.placeholderChannel'), trigger: 'blur' }],
            startTime: [{ required: true, message: this.$i18n.t('ProgramList.rules.placeholderStartTime'), trigger: 'blur' }],
            endTime: [{ required: true, message: this.$i18n.t('ProgramList.rules.placeholderEndTime'), trigger: 'blur' }],
            // programPoster: [{ required: true, message: this.$i18n.t('ProgramList.rules.placeholderPoster'), trigger: 'blur' }],
            // programDesc: [{ required: true, message: this.$i18n.t('ProgramList.rules.placeholderProgramDesc'), trigger: 'blur' }],
        },
    }
  },
  methods:{
    onCatch: function(){

    },
    onAdd: function() {
        this.isEnabled = false;
        this.isShowEditForm = true;
        if (this.$refs['editForm']) {
            this.$refs['editForm'].resetFields();
        }
       this.editForm.keyID = "";
        this.editForm.version = "";
        this.editForm.programCode = "",
        this.editForm.programName= "",
        this.editForm.channel = "",
        this.editForm.site = "",
        this.editForm.startTime = "",
        this.editForm.endTime = "",
        this.editForm.billDuration = "",
        this.editForm.poster = "",
        this.editForm.programDesc = "",

        this.curCommand = "SaveNew";
        // this.canEditCode = false;
    },
     // 编辑按钮单击事件
    onEdit: function(index, row) {
      this.isEnabled = true;
      //dataAccess.queryDomainModelByKeyID(this, modelName, "Query", row.keyID, true, this.$options.methods.editCallback);
      this.queryModelByKeyID(this.modelName,row.keyID,"Query",this.editCallback);
    },
    // 编辑按钮回调事件
    editCallback: function(isSuccess, json) {
      if (isSuccess) {
        this.curCommand = "UpdateProc";
        this.isShowEditForm = true;
        if (this.$refs["editForm"]) {
          this.$refs["editForm"].resetFields();
        }
        // this.editForm.keyID = json.keyID;
        // this.editForm.version = json.version;
        // this.editForm.programName = json.programName;
        // this.editForm.programCount = json.programCount;
        // this.editForm.startTime = json.startTime;
        // this.editForm.endTime = json.endTime;
        // this.editForm.programDesc = json.programDesc;
        this.editForm = json;
        this.canEditCode = true;
      } else {
        this.$message({
          message: json.msg,
          type: "warning"
        });
      }
    },

    // 提交编辑面板数据
    submitForm2: function submitForm2(formName) {
        var _this = this;

        this.$refs[formName].validate(function (valid) {
            if (valid) {
                _this.loading = true;
                _this.procCommand(_this.curCommand,
                _this.modelName,
                "Default",
                _this.editForm,
                _this.submitForm2Callback);
            } else {
                return false;
            }
        });
    },
    // 执行命令后的回调函数
    submitForm2Callback: function submitForm2Callback(isSuccess,json) {
        this.loading = false;
        if(isSuccess){
            this.isSendEditForm = false;
            this.$message({
                message: this.$i18n.t("message.successTip"),//resource.message.successTip,
                type: 'success'
            });
            this.queryTable();
        }
        else
        {
            this.$message({
                            message: json.msg,
                            type: 'warning'
                            });
        }
    },

     // 重置
    onReset:function(){
        if (this.$refs['form']) {
            this.$refs['form'].resetFields();
        }
        this.formQueryCondition.programCode.val = "";
        this.formQueryCondition.programName.val = "";
        this.formQueryCondition.site.val = "";
        this.formQueryCondition.channel.val = "";
        this.formQueryCondition.startTime.val = "";
        this.formQueryCondition.endTime.val = "";
        this.formQueryCondition.copyrightExpirationTime.val = "";
        this.formQueryCondition.copyrightExpirationTimeEND.val = "";
    },

     // 授权按钮单击事件
    editMenu: function(index, row) {

    },

    //查看截图
    onScreenShot: function() {

    },

    success: function(){
        this.isSendEditForm = false;
        this.$message({
                message: this.$i18n.t("message.successTip"),
                type: 'success'
        });
        this.queryTable();
    },

    // 批量下发
    onSendBatch: function(){
        this.isSendEditForm = true;
    },
    //回退事件
    onBack: function(isSuccess, json) {
        //this.$router.go(-1);//后退
        this.$parent.setCurrentComponent("goBack",null);
    },

     // 审核记录
    onRecord: function(index, row) {

    },

     // 导入
    onImport: function(index, row) {

    },

     // 审核记录导出
    onExport: function(index, row) {

    },

     // 资产审核按钮单击事件
    onAudit: function(index, row) {

    },

     // 查看详情按钮单击事件
    onDetails: function(index, row) {

        //dataAccess.queryDomainModelByKeyID(this, modelName, "Query", row.keyID, true, this.$options.methods.editCallback);
        // this.queryModelByKeyID(this.modelName,row.keyID,"Query",this.detailsCallback);
    },

    onPlay: function(){

    },
    // 下线提示框
    offline() {
        this.$confirm(this.$i18n.t("ProgramList.dialog.offlineMessage"),
          this.$i18n.t("ProgramList.dialog.tip"), {
         // confirmButtonText: this.$i18n.t("ProgramList.btnText.confirmBtnText"),
          confirmButtonText: this.$i18n.t("message.yes"),
          cancelButtonText: this.$i18n.t("message.cancel"),
          type:"warning",
          callback: action => {
            this.$message({
                message: this.$i18n.t("message.successTip"),
                type: 'success'
            });
          }
        });
    },

    //下发提示框
    doSendBatch() {
        //this.isSendEditForm = true;
        this.$alert(this.$i18n.t("ProgramList.dialog.onlineMessage"),
          this.$i18n.t("ProgramList.dialog.tip"), {
          confirmButtonText: this.$i18n.t("ProgramList.btnText.confirmBtnText"),
          callback: action => {
            this.$message({
                message: this.$i18n.t("message.successTip"),
                type: 'success'
            });
          }
        });

    },
    //  // 提交编辑面板数据
    //     submitForm2: function submitForm2(formName) {
    //         var _this = this;

    //         this.$refs[formName].validate(function (valid) {
    //             if (valid) {
    //                 _this.loading = true;
    //                 _this.procCommand(_this.curCommand,
    //                 _this.modelName,
    //                 "Default",
    //                 _this.editForm,
    //                 _this.submitForm2Callback);
    //             } else {
    //                 return false;
    //             }
    //         });
    //     },
    //     // 执行命令后的回调函数
    //     submitForm2Callback: function submitForm2Callback(isSuccess,json) {
    //         this.loading = false;
    //         if(isSuccess){
    //             this.isSendEditForm = false;
    //             this.$message({
    //                 message: this.$i18n.t("message.successTip"),//resource.message.successTip,
    //                 type: 'success'
    //             });
    //             this.queryTable();
    //         }
    //         else
    //         {
    //             this.$message({
    //                             message: this.$i18n.t("errorCode." + json.reason),
    //                             type: 'warning'
    //                             });
    //         }
    //     },


    // 详情按钮回调事件
    detailsCallback: function(isSuccess,json) {
        // if(isSuccess){
        //     this.curCommand = "UpdateProc";
        //     this.isShowInfoForm = true;
        //     if (this.$refs['editForm']) {
        //         this.$refs['editForm'].resetFields();
        //     }
        //     this.editForm.keyID = json.keyID;
        //     this.editForm.version = json.version;
        //     this.editForm.code = json.code;
        //     this.editForm.name = json.name;
        //     this.editForm.desc = json.desc;
        //     this.editForm.enName = json.enName;
        //     this.editForm.isEnabled = json.isEnabledVal;
        //     this.canEditCode = true;
        // }
        // else{
        //     this.$message({
        //         message: this.$i18n.t("errorCode." + json.reason,json.message),
        //         type: 'warning'
        //         });
        // }
    },
     initTable:function(){
        this.tableHeight = this.$refs.context.offsetHeight - this.$refs.queryBox.offsetHeight;
        this.isInit = true;
    },
    enterDown(){
      var g = this
      if(g.isShowEditForm){
        g.submitForm('editForm')
      }else if(g.isSendEditForm){
        // 详情
        g.success()
      }else if(!g.loading){
        g.onQuery()
      }
    }

  },
  mounted: function mounted() {
    this.onQuery();
    window.setTimeout(this.initTable,100);

  }
}


</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
